const app = new Vue({
    el: '#app',
    data: {
        fields: ['学号', '姓名', '性别', '年龄', '家庭住址', '操作'],
        students: [
            { id: 1001, name: '张三', sex: '男', age: 25, address: '重庆市荣昌区' },
            { id: 1002, name: '李四', sex: '女', age: 24, address: '重庆市武隆区' },
            { id: 1003, name: '王五', sex: '男', age: 19, address: '重庆市秀山区' },
            { id: 1004, name: '成六', sex: '女', age: 22, address: '重庆市沙坪坝' },
            { id: 1005, name: '马七', sex: '男', age: 20, address: '重庆市南岸区' },
            { id: 1006, name: '王朝', sex: '女', age: 21, address: '重庆市武隆区' },
            { id: 1007, name: '马汉', sex: '男', age: 21, address: '重庆市荣昌区' },
            { id: 1008, name: '张龙', sex: '女', age: 20, address: '重庆市北碚区' },
            { id: 1009, name: '赵虎', sex: '男', age: 19, address: '重庆市城口区' },
            { id: 1010, name: '张东', sex: '女', age: 18, address: '重庆市永川区' },
            { id: 1011, name: '李宁', sex: '男', age: 20, address: '重庆市璧山区' },
            { id: 1012, name: '胡芬', sex: '男', age: 22, address: '重庆市江津区' },
            { id: 1013, name: '陈虎', sex: '女', age: 23, address: '重庆市璧山区' },
            { id: 1014, name: '刘向', sex: '女', age: 20, address: '重庆市荣昌区' },
            { id: 1015, name: '张旭', sex: '男', age: 21, address: '重庆市渝北区' }
        ]
    },
    computed: {
        total() {
            return this.students.length + '人';
        },
        boy() {
            let boySum = 0;
            this.students.filter((gender) => {
                if (gender.sex == '男') {
                   boySum+=1;
                }
            })
            return boySum + '人';
        },
        girl() {
            let girlSum = 0;
            this.students.filter((gender) => {
                if(gender.sex == '女') {
                    girlSum += 1;
                }
            })
            return girlSum + '人';
        }
    },
    methods: {
        removeHandle(index) {
            this.students.splice(index, 1);
        }
    }

})
